<template>
  <div class="page-main" :style="cssVars">
    <div class="basic-info">
      <span class="text" :class="[currTabName=='progress' ? 'active' : '']" @click="switchTabs('progress')">审批中<i class="number progress">{{dataObj && dataObj.ongoing}}</i></span>
      <span class="text" :class="[currTabName=='end' ? 'active' : '']" @click="switchTabs('end')">已结束<i class="number end">{{dataObj && dataObj.completed}}</i></span>
      <span class="appro-btn" @click="selectFlag=!selectFlag">发起审批</span>
      <ul class="approval-select" v-show="selectFlag" v-if="dataObj && dataObj.approvalTypes">
        <li class="approval-select-item" v-for="(item, index) in dataObj.approvalTypes" :key="index"  @click="clickStartAppro(item)">{{item.split('|')[1]}}</li>
      </ul>
    </div>
    <ul class="approval-list" v-if="approvalList.length">
      <li class="approval-item" v-for="(item, index) in approvalList" :key="index" @click="clickApproItem(item)">
        <p class="approval-tag progress" v-if="currTabName=='progress'">审批中</p>
        <p class="approval-tag progress" v-if="currTabName=='end'">已结束</p>
        <p class="approval-title">{{item.approvalName}}</p>
        <p class="approval-text">审批类型：{{item.approvalType}}</p>
        <p class="approval-text">发起人：{{item.userName}}</p>
        <p class="approval-text">当前节点：{{item.currentStep}}</p>
        <p class="approval-text">更新时间：{{item.updateTime}}</p>
      </li>
    </ul>
    <div v-else class="approval-nodata">
      <p class="img"></p>
      当前没有内容
    </div>
  </div>
</template>

<script>
export default {
  props: {
		dataObj: {
			type: Object,
			default: null
		},
    invoke: Function,
    themeColor: String,
  },
  computed: {
    cssVars() {
      return {
        "--themeColor": this.themeColor
      }
    }
  },
  data() {
    return {
      selectFlag: false,
      approvalList: [],
      currTabName: 'progress'
    };
  },
  watch: {
    dataObj (val) {
      if (val) {
        this.switchTabs(this.currTabName)
      }
    }
  },
  mounted() {
    this.approvalList = this.dataObj && this.dataObj.ongoingVo || []
    document.addEventListener(
      "click",
      (e) => {
        if (!(e.target.className==='appro-btn')) {
          this.selectFlag = false
        }
      },
      true
    )
  },
  methods: {
    switchTabs(flag) {
      this.currTabName = flag
      if (flag==='progress') {
        this.approvalList = this.dataObj.ongoingVo
      } else {
        this.approvalList = this.dataObj.doneVo
      }
    },
    clickApproItem(val) {
      let str = ''
      str = val.approvalNameCode + ',' + val.approvalId
      this.invoke('clickApproItem', str)
    },
    clickStartAppro(val) {
      let str = ''
      str = val.split('|')[0]
      this.invoke('clickStartAppro', str)
    }
  }
};
</script>
<style  lang="less"  scoped>
.page-main {
  width: 100%;
  margin: 0 auto;
  padding: 10px 0;
  background: #fff;
}
.approval-nodata {
  font-size: 14px;
  text-align: center;
  color: #666666;
  .img {
    width: 168px;
    height: 96px;
    margin: 30px auto 10px;
    background: url('./nodata.svg') no-repeat;
  }
}
.basic-info {
  position: relative;
  .text {
    font-size: 12px;
    line-height: 24px;
    color: #666666;
    height: 24px;
    display: inline-block;
    padding-right: 15px;
    margin-right: 15px;
    cursor: pointer;
    &:first-of-type {
      border-right: 1px solid #E5E5E5;
    }
    &.active {
      font-weight: 600;
    }
  }
  .number {
    font-size: 18px;
    font-style: normal;
    margin-left: 8px;
    display: inline-block;
    &.progress {
      color: #FF991C;
    }
    &.end {
      color: #1BA854;
    }
  }
  
  
  .appro-btn {
    width: 64px;
    height: 24px;
    border-radius: 2px;
    background: var(--themeColor);
    font-size: 12px;
    line-height: 24px;
    color: #FFFFFF;
    display: inline-block;
    text-align: center;
    cursor: pointer;
    float: right;
  }
}
.approval-item {
  width: 100%;
  border-radius: 4px;
  background: #FAFAFA;
  margin-top: 20px;
  padding: 20px;
  position: relative;
  cursor: pointer;
}

.approval-title {
  font-size: 14px;
  line-height: 28px;
  color: #212121;
}
.approval-text {
  font-size: 12px;
  line-height: 22px;
  color: #999999;
}
.approval-tag {
  width: 52px;
  height: 20px;
  text-align: center;
  border-radius: 2px;
  font-size: 12px;
  line-height: 20px;
  position: absolute;
  top: 10px;
  right: 10px;
  &.progress {
    color: #FF991C;
    border: 1px solid #FF991C;
  }
  &.end {
    color: #1BA854;
    border: 1px solid #1BA854;
  }
}
.approval-select {
  width: 120px;
  border-radius: 2px;
  background: #FFFFFF;
  position: absolute;
  right: 0;
  z-index: 1;
  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.2);
}
.approval-select-item {
  width: 100%;
  height: 32px;
  line-height: 32px;
  padding: 0 12px;
  border-bottom: 1px solid #F5F5F5;
  font-size: 12px;
  color: #212121;
  cursor: pointer;
  &:hover {
    background: #F5F5F5;
  }
}
</style>